<!--
 * @Author: Jason Liu
 * @Date: 2023-11-20 15:22:34
 * @Desc: 
-->
<template>
  <a-layout-header class="tool_bar">
    <a-row>
      <a-col :span="1">
        <a-button icon="caret-left" class="a_back" @click="goBack()"></a-button>
      </a-col>
      <a-col :span="12">
        &nbsp;
        <win-title @click.native="showSelect = true">
          <template v-if="indicatorInfo.code">
            {{ indicatorInfo.name }}
            <a-button type="link">({{ indicatorInfo.code }})</a-button>
          </template>
          <span class="view_span" v-else>请维护指标信息</span>
          &nbsp;<a-icon type="search" />
        </win-title>
        <indicator-selection :set.sync="showSelect" @change="setIndicatorInfo" />
      </a-col>
      <a-col :span="11" class="api_tool">
        <template v-for="item in activeData.buttons">
          <a-button v-if="item == 'skip'" :key="item" type="" @click="nextStep"
            >跳过</a-button
          >
          <a-button
            v-else-if="item == 'prev'"
            type="primary"
            :key="item"
            @click="setStepCode(-1)"
            >上一步</a-button
          >
          <a-button
            v-else-if="item == 'next'"
            type="primary"
            :key="item"
            @click="setStepCode(1)"
            >下一步</a-button
          >
          <a-button
            v-else-if="item == 'save'"
            icon="form"
            type="primary"
            :key="item"
            @click="save()"
            >保存</a-button
          >
          <a-button
            type="primary"
            icon="cloud-sync"
            :key="item"
            v-else-if="item == 'async'"
            @click="synchronous"
            >同步保存</a-button
          >
          <a-button
            v-else-if="['modelAdd', 'dwsAdd', 'adsAdd'].indexOf(item) > -1"
            icon="plus"
            type="primary"
            :key="item"
            @click="add"
            >新增</a-button
          >
          <a-dropdown v-else="item == 'recordModel'" :key="item" :disabled="hdwList().length == 0">
            <a-menu slot="overlay" @click="handleMenuClick">
              <template v-for="item in hdwList()">
                <a-menu-item :key="item.id">
                  <a-icon type="profile" />{{ item.tableName }}({{ item.tableCode }})
                </a-menu-item>
              </template>
            </a-menu>
            <a-button type="primary" icon="profile">模型记录<a-icon type="down" /></a-button>
          </a-dropdown>
        </template>
        <a-tooltip title="关闭" v-if="close">
          <a-button icon="close" @click="goBack()"> </a-button>
        </a-tooltip>
        &nbsp;
      </a-col>
    </a-row>
  </a-layout-header>
</template>

<script>
//配置面板

const { navigationList } = require("../config");

const indicatorSelection = require("w-vue-chongqing/integratSchedue/indicatorSelection")
  .default;
export default {
  components: { indicatorSelection },
  props: {
    step: {
      type: [String, Number],
      default: 0,
    },
    value: {
      type: Object,
      default: () => {
        return {
          id: undefined,
          code: undefined,
          name: undefined,
        };
      },
    },
    close: {
      type: [Function, Boolean],
      default: false,
    },
  },
  inject: ["hdwList"],
  data() {
    return {
      loading: false,
      indicatorInfo: this.value,
      stepCode: this.step,
      showSelect: false,
      activeData: {
        buttons: ["skip"],
      },
    };
  },
  created() {
    this.setActiveData();
  },
  methods: {
    /**
     * 模型记录切换
     */
    handleMenuClick(e) {
      this.$emit("menuClick", e);
    },
    goBack() {
      this.$emit("back");
    },
    /**
     * @Author: Jason Liu
     * @description: 设置步骤
     */
    setStepCode(step) {
      if (step > 0 && (this.stepCode == 0 || this.stepCode == 9)) {
        this.save();
      } else {
        this.stepCode = this.stepCode + step;
      }
    },
    /**
     * @Author: Jason Liu
     * @description: 跳过当前节点
     */
    nextStep() {
      this.stepCode++;
    },
    /**
     * @Author: Jason Liu
     * @description: 刷新数据
     */
    reload() {
      this.$emit("reload");
    },
    save() {
      this.$emit("save");
    },
    /**
     * @Author: Jason Liu
     * @description: 同步保存
     */
    synchronous() {
      this.$emit("synchronous");
    },
    add() {
      this.$emit("add");
    },
    /**
     * @Author: Jason Liu
     * @description: 设置激活的数据
     */
    setActiveData() {
      let devise = navigationList[this.stepCode];
      if (devise) {
        this.activeData = devise;
      }
    },
    /**
     * @Author: Jason Liu
     * @description: 设置指标信息
     */
    setIndicatorInfo(e) {
      this.$emit("changeIndicatorInfo", {
        id: e.id,
        indicatorCode: e.code,
        indicatorName: e.name,
      });
    },
  },
  watch: {
    step(val) {
      this.stepCode = val;
    },
    stepCode(val) {
      this.setActiveData();
      this.$emit("update:step", val);
    },
    value(val) {
      this.indicatorInfo = val;
    },
    loading() {
      this.$emit("loading", this.loading);
    },
  },
};
</script>

<style lang="less" scoped>
@import "~w-vue-chongqing/themes/config.less";
.ant-layout-header {
  &.tool_bar {
    background: #fff;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid @borderColor;
    position: relative;
    padding: 0;
    z-index: 1;
    .ant-form {
      .ant-form-item {
        .ant-form-item-label,
        .ant-form-item-control {
          line-height: 48px;
        }
      }
    }
    .view_span {
      opacity: 0.6;
    }
    .api_tool {
      text-align: right;
    }
    .ant-input {
      width: 100%;
    }
    .ant-btn {
      margin-right: 8px;
    }

    .a_back {
      width: 48px;
      height: 48px;
      border: 0;
      font-size: 20px;
      color: rgba(0, 0, 0, 0.7);
      border-radius: 0;
      border-right: 1px solid @borderColor;
      border-bottom: 1px solid @borderColor;
      &:hover {
        background: rgba(0, 0, 0, 0.1);
      }
    }
  }
}
</style>
<style lang="less">
@import "~w-vue-chongqing/themes/config.less";

.ant-popover {
  &.remark_card {
    width: 320px;
    .set_tool {
      border-top: 1px solid @borderColor;
      height: 48px;
      line-height: 48px;
      text-align: right;
    }
    .ant-popover-content {
      margin-top: -46px;
      margin-left: -16px;
      .ant-popover-inner-content {
        padding: 12px 16px 0;
        .ant-form-item {
          width: 100%;
        }
      }
    }
  }
}
</style>
